<template>
  <div class="navBar">
    <van-tabbar v-model="active">
      <van-tabbar-item name="discovery" icon="home-o">发现</van-tabbar-item>
      <van-tabbar-item name="match" icon="friends-o">匹配</van-tabbar-item>
      <div class="navBar-workBench-writing" :class="{'navBar-workBench-writing':true,'navBar-workBench-writing-show':isShow}">
        <van-icon @click="isShow = !isShow" name="add-square" color="#FFC069" size="3rem"/>
      </div>
      <van-tabbar-item name="message" icon="chat-o">消息</van-tabbar-item>
      <van-tabbar-item name="my" icon="contact">我的</van-tabbar-item>
    </van-tabbar>
    <van-popup position="bottom" v-model:show="isShow" round>
      <div class="navBar-creative-type">
        <div class="navBar-creative-type-header">
          <div>总共 <b>{{num}}</b> 篇内容</div>
        </div>
        <div class="navBar-creative-type-content">
          <div class="navBar-creative-type-content-writing" @touchend="setIsWritingShow">
            <div>
              <p>创作文章</p>
              <p>写你所想</p>
              <p>记你所见</p>
            </div>
            <div>
              <van-icon class-prefix="aliIconfont" name="icon-tuwenxiangqing" color="orange" size="4.125rem"/>
            </div>
          </div>
          <div class="navBar-creative-type-content-video" @touchend="setIsVideoShow">
            <div>
              <p>拍摄视频</p>
              <p>拍你所遇</p>
              <p>抓住瞬间</p>
            </div>
            <div>
              <van-icon class-prefix="aliIconfont" name="icon-shipintianchong" color="orange" size="4.125rem"/>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <Writing :isWritingShow="isWritingShow"/>
    <Video :isVideoShow="isVideoShow"/>
  </div>
</template>
<script>
import { Tabbar, TabbarItem, Icon, Popup } from "vant";
import Writing from "@/components/Writing.vue";
import Video from "@/components/Video.vue";
import { getUserArticles,getUserVideos } from "@/service/user";
export default {
  components: {
    [Tabbar.name]:Tabbar,
    [TabbarItem.name]:TabbarItem,
    [Icon.name]: Icon,
    [Popup.name]:Popup,
    Writing,
    Video
  },
  mounted(){
    getUserArticles().then(res1=>{
      getUserVideos().then(res2=>{
        this.num = res1.length + res2.length;
      })
    })
  },
  data(){
    return {
      active:"discovery",
      isShow:false,
      num:0,
    }
  },
  computed:{
    isWritingShow(){
      return this.$store.state.isWritingShow;
    },
    isVideoShow(){
      return this.$store.state.isVideoShow;
    }
  },
  methods:{
    setIsWritingShow(){
      this.$store.commit('setIsWritingShow',true);
    },
    setIsVideoShow(){
      this.$store.commit('setIsVideoShow',true);
    }
  },
  watch:{
    active(value){
      this.$router.push(value);
    }
  }
}
</script>
<style lang="less">
.navBar{
  .van-tabbar-item{
    background: #fff
  }
  .navBar-workBench-writing{
    position: relative;
    background: #fff;
    .van-icon{
      transition-property: transform;
      transition-duration: .3s;
      transform: translateY(0rem);
    }
    .navBar-workBench-writing-bar{
      width: 6.25rem;
      height: 6.25rem;
      top: -100%;
      left: 50%;
      transform: translateX(-50%) scale(0);
      transform-origin: bottom center;
      position: absolute;
      display: flex;
      align-items: flex-start;
      z-index: -111;
      box-shadow: 0 0 .625rem #FFE7BA;
      border-radius: 6.25rem;
      background: radial-gradient(#ffe7ba75,#FFE7BA,#FFE7BA);
      transition-property: transform,border-radius;
      transition-duration: .5s;
      .van-tabbar-item{
        margin:.3125rem;
        border-radius: 6.25rem;
        background: #FFA500;
        transform: scale(0);
        transition-property: transform;
        transition-duration: 1s;
      }
      >div{
        margin-top: .3125rem;
        flex: 1;
      }
    }
    
  }
  .navBar-workBench-writing-show{
    .van-icon{
      transform: translateY(-0.9375rem);
    }
    .navBar-workBench-writing-bar{
      transform: translateX(-50%) scale(1);
      .van-tabbar-item{
        transform: scale(1);
      }
    }
  }
  .navBar-creative-type{
    width: 100%;
    height: 180px;
    .navBar-creative-type-header{
      height: 3.75rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0px 20px;
    }
    .navBar-creative-type-content{
      display: flex;
      flex-wrap: wrap;
      >div{
        flex: 1;
        margin:.3125rem;
        background: linear-gradient(135deg,#ffff,#FFE7BA,#FFE7BA,orange);
        display: flex;
        justify-content: center;
        border-radius: 15px;
        box-shadow: 0px 0px 3px #999;
        cursor: pointer;
        >div{
          &:nth-child(1){
            margin: .625rem .3125rem .625rem 0;
            p{
              margin: 0;
              &:nth-child(1){
                padding: .3125rem 0;
                font-weight: 600;
              }
            }
          }
          &:nth-child(2){
            align-self: flex-end;
            transform: translate(.9375rem,0);
          }
        }
      }
    }
  }
}
</style>